<template>

  <el-dialog title="网关通道集合交易限制日志" :visible.sync="dialogVisible" width="85%" :close-on-click-modal="false">

    <el-form ref="main-form" :model="form" :rules="rules" label-width="350px" label-position="right" :inline="true" >
      <el-form-item label="网关通道集合" size="mini" prop="collectionName">
        <el-input v-model="form.collectionName" disabled></el-input>
      </el-form-item>

      <el-form-item label="终端号" size="mini" prop="terNo">
        <el-input v-model="form.terNo" disabled></el-input>
      </el-form-item>

      <div v-for="(channel, key) in form.content">
        <h4>调度通道</h4>
        <el-form-item label="调度级别" size="mini">
          <el-input type="number" v-model="channel.sort" disabled></el-input>
        </el-form-item>

        <el-form-item label="通道名称" size="mini">
          <el-input v-model="channel.channelName" disabled></el-input>
        </el-form-item>

        <el-row>
          <el-form-item label="单笔金额限制（单位元）" size="mini">
            <el-input type="number" v-model="channel.amountLimit" disabled></el-input>
          </el-form-item>  
        </el-row>

        <el-form-item label="日交易笔数限制（单位笔）" size="mini">
          <el-input type="number" v-model="channel.dayCountLimit" disabled></el-input>
        </el-form-item>

        <el-form-item label="月交易笔数限制（单位笔）" size="mini">
          <el-input type="number" v-model="channel.monthCountLimit" disabled></el-input>
        </el-form-item>

        <el-form-item label="日交易总金额限制（单位元）" size="mini">
          <el-input type="number" v-model="channel.dayAmountLimit" disabled></el-input>
        </el-form-item>

        <el-form-item label="月交易总金额限制（单位元）" size="mini">
          <el-input type="number" v-model="channel.monthAmountLimit" disabled></el-input>
        </el-form-item>

        <el-form-item label="日交易总金额限制阈值（百分比）" size="mini">
          <el-input type="number" v-model="channel.dayAmountThreshold" disabled></el-input>
        </el-form-item>

        <el-form-item label="月交易总金额限制阈值（百分比）" size="mini">
          <el-input type="number" v-model="channel.monthAmountThreshold" disabled></el-input>
        </el-form-item>
      </div>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">关 闭</el-button>
    </div>

  </el-dialog>
</template>

<script>

import ApiMain from '@/api/common';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,
      isSettingLoad: false,

      form: {
        collectionName: '',
        terNo: '',
        content: [],
      },

      rules: {
      },

      batchId  : null,
      data: null,

    }
  },

  methods: {

    show (batchId = null) {

      this.batchId = batchId;
      this.fetchData();

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.reset();
    },

    reset () {
      this.form = {
        collectionName: '',
        content: []
      };
    },

    fetchData () {

      ApiMain.getChannelCollectionTerConLogById({ batchId: this.batchId })
      .then(re => {
        this.data = re; 
      })
      .catch(() => {
        this.data = null;
      })
      .finally(() => {
        this.renderData();
      });
    },

    renderData () {
      this.form.collectionName = this.data.collectionName;
      this.form.terNo = this.data.terNo;
      let content = [];
      for (var i in this.data.content) {
        let tmp = {};
        tmp = {
          sort: this.data.content[i].sort,
          channelId: this.data.content[i].channelId,
          channelName: this.data.content[i].channelName,
          amountLimit: this.data.content[i].amountLimit / 100,
          dayCountLimit: this.data.content[i].dayCountLimit,
          monthCountLimit: this.data.content[i].monthCountLimit,
          dayAmountLimit: this.data.content[i].dayAmountLimit / 100,
          monthAmountLimit: this.data.content[i].monthAmountLimit / 100,
          dayAmountThreshold: this.data.content[i].dayAmountThreshold,
          monthAmountThreshold: this.data.content[i].monthAmountThreshold,

          sumDayCountLimit: this.data.content[i].sumDayCountLimit,
          sumMonthCountLimit: this.data.content[i].sumMonthCountLimit,
          sumDayAmountLimit: this.data.content[i].sumDayAmountLimit / 100,
          sumMonthAmountLimit: this.data.content[i].sumMonthAmountLimit / 100,
          sumDayAmountThreshold: this.data.content[i].sumDayAmountThreshold,
          sumMonthAmountThreshold: this.data.content[i].sumMonthAmountThreshold,

          totalDayCountLimit: this.data.content[i].totalDayCountLimit,
          totalMonthCountLimit: this.data.content[i].totalMonthCountLimit,
          totalDayAmountLimit: this.data.content[i].totalDayAmountLimit / 100,
          totalMonthAmountLimit: this.data.content[i].totalMonthAmountLimit / 100,
          totalDayAmountThreshold: this.data.content[i].totalDayAmountThreshold,
          totalMonthAmountThreshold: this.data.content[i].totalMonthAmountThreshold,
        }
        content.push(tmp);
      }
      this.form.content = content;
    }

  }
}
</script>

<style>

</style>
